import React, { useEffect, useState } from 'react';
import {Link, Outlet, useNavigate} from 'react-router-dom'
import { Container, ListGroup,CardLink, Breadcrumb, BreadcrumbItem, Button } from 'react-bootstrap';
import eventEmitter from '../../../utils/EventEmitter';
import constants from '../../../constants';
import "./index.css";

const AITaskBuild:React.FC = (props,state)=>{
    
    const [currentIdx,setCurrentIndex] = useState<number>(0)
    const navigate = useNavigate()

    const hrefs = [
        "/inference/build",
        "/inference/build/train",
        "/inference/build/dump"
    ]

    useEffect(()=>{
        eventEmitter.dispatch(constants.str.hideTopContent)
        return ()=>{
        }
    },[])

    const enabledForIndex = (idx:number) => {
        return idx === currentIdx
    }

    const onClickContinue = ()=> {
        const cidx = currentIdx < hrefs.length-1 ? currentIdx + 1 : currentIdx
        setCurrentIndex(cidx)
        gotoUrl(cidx)
    }

    const onClickPrevious = ()=> {
        const cidx = currentIdx > 0 ? currentIdx - 1 : currentIdx
        setCurrentIndex(cidx)
        gotoUrl(cidx)
    }

    const gotoUrl = (idx:number=0)=>{
        const url = hrefs[idx]
        navigate(url)
    }

    const enableLast = ()=> {
        return currentIdx > 0
    }

    const enableNext = ()=> {
        return currentIdx < hrefs.length - 1
    }

    return (<Container fluid className='d-flex flex-column' style={{height:"100%"}}>
            Inference..
            <a href='/inference/guide' className='mt-2 mb-2'>My AI knowledge collection</a>
            <Container fluid className='d-flex flex-row justify-content-between'>
                <Button disabled={!enableLast()} onClick={onClickPrevious}>Last</Button>
                <Button disabled={!enableNext()} onClick={onClickContinue}>Next</Button>
            </Container>
            <Breadcrumb>
                <BreadcrumbItem active={!enabledForIndex(0)} href='/inference/build'>Analysis & Prepare Data</BreadcrumbItem>
                <BreadcrumbItem active={!enabledForIndex(1)} href='/inference/build/train'>TrainModel</BreadcrumbItem>
                <BreadcrumbItem active={!enabledForIndex(4)} href='/inference/build/dump'>Dump Model</BreadcrumbItem>
            </Breadcrumb>
            <Outlet/>
            <div className='d-flex' style={{flex:1}}/>
            {!enableNext() && <Button className='mt-2 align-self-center mb-5' style={{width:200}}>Submit</Button>}
    </Container>)
}

export default AITaskBuild;